<template>
    <div style="background-color: #f1f4f8;">
        <div style="background-image: linear-gradient(to bottom,#0380fe,#ffffff);">
            <div style="display: flex;align-items: center;justify-content: space-between;background-color: #1989fa;">
                <van-search @click-input="$router.push(`/searchDoc`)" v-model="value" background="#1989fa" placeholder="疾病/症状/科室/医院/医生" />
                <div style="text-align: center;color: aliceblue;" @click="$router.push(`/home/index`)">
                    <van-icon size="30" name="todo-list-o" />
                    <p style="font-size: 14px;">返回首页</p>
                </div>
            </div>
            <div>
                <img src="../../assets/mypic/clover.jpeg" style="height: 200px;object-fit: cover;width: 100%;">
            </div>
            <div style="padding: 10px;">
                <div style="display: flex;justify-content: space-between;">
                    <span style="font-weight: bold; font-size:18px;line-height: 36px;">快速问医生</span>
                    <div style="background-image: linear-gradient(to bottom,#ff4e48,#fd857e);border-radius: 10px 0; color: aliceblue; font-weight: bold;box-sizing: border-box;padding: 10px;line-height: 100%;">限时特惠</div>
                </div>
                <div style="display: flex; align-items: center;justify-content: space-between;margin-top: 20px;">
                    <div style="display: flex;">
                        <img src="../../assets/mypic/dian.jpg" style="object-fit: cover;border-radius: 50%;width: 45px;">
                        <div style="margin-left: 10px;">
                            <p style="font-weight: bold;margin: 0px;">3分钟接诊</p>
                            <p style="font-size: 14px;margin-top: 5px;margin: 0px;">为你优选<span
                                    style="color: #ae7a32;">三甲</span>医生</p>
                        </div>
                    </div>
                    <div style="display: flex;border: 1px solid blue;border-radius: 5px;">
                        <div style="padding: 5px 8px;">
                            <p style="color: #d14933;font-weight: bolder;margin: 0px;">限时 ￥9.00</p>
                            <p style="margin: 0px;"><s style="color: #96a0a9;">原价 ￥19.9</s></p>
                        </div>
                        <button
                            style="border: 0px;font-size:18px;border-radius:5px ; background-color:#0080ff;color: white;font-weight: bold;width: 75px;cursor: pointer;" @click="$router.push(`/aiconsulting/1`)">立即问</button>
                    </div>
                </div>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                    ·正在接诊的医生
                </van-divider>
                <div style="display: flex;justify-content: space-between;width: 100%;">
                    <van-swipe vertical loop :show-indicators="false" style="height: 20px;width: 100%;" autoplay="3000"
                        duration="2000">
                        <van-swipe-item v-for="item in Doctors" :key="item.doctor_id">
                            <div style="display: flex;justify-content: center;width: 100%;flex-direction: row;">
                                <div>
                                    <div>
                                        <img :src="item.doctor_avatar"
                                            style="vertical-align: middle;width: 20px;border-radius: 50%;">
                                        <span style="margin:0 5px;font-size: 14px;">{{ item.doctor_name }}</span>
                                        <span
                                            style="display:inline-block;font-size: 12px;background-color: #ececf2;color: #8e919a;">三甲</span>
                                            <span style="font-size: 14px;transform: scale(0.8);margin-left: 8px;color: #7a7e82;">{{ item.hospital_name }}</span>
                                    </div>
                                </div>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </div>
        </div>
        <div style="box-sizing: border-box;padding: 5px;background-color: #ffffff; padding: 0 8px;">
            <div style="display: flex;justify-content: space-between;box-sizing: border-box;padding: 20px 10px;">
                <p style="font-size: larger; font-weight: bolder;line-height: 32px;">专科门诊</p>
                <van-button round style="border: 1px solid #1b76d5;color: #1b76d5;font-weight: bolder;width: 70px;"
                    size="small">更多 ></van-button>
            </div>
            <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                <div v-for="item in Departments" :key="item.d_id" style="margin-top: 5px; display: flex;background-color: #eff8ff;border-radius: 8px;width: 170px;height: 61px;"
                    @click="$router.push(`/online/${item.d_id}`)">
                    <div style="margin-top: 5px;">
                        <p style="font-weight:bolder;font-size: 16px;margin-left: 5px;">{{item.d_name}}</p>
                        <p style="margin-top: 10px;font-weight: bolder;margin-left: 5px;color: gray;font-size: 13px;">{{item.d_info}}</p>
                    </div>
                    <i :class="item.d_icon"></i>
                </div>
            </div>
        </div>
        <div>
            <div style="margin: 10px;background-color: #eff8ff;">
                <p style="padding: 10px 8px;font-weight: bolder;font-size: 16px;">全部医生</p>
                <van-tabs v-model:active="navActive" class="tabs" color="#f03d37">
                    <van-tab title="皮肤科" name="1"></van-tab>
                    <van-tab title="妇科" name="2"></van-tab>
                    <van-tab title="儿科" name="3"></van-tab>
                    <van-tab title="男科" name="4"></van-tab>
                    <van-tab title="消化内科" name="5"></van-tab>
                </van-tabs>
                <div style="display: flex;border-bottom: 1px solid gray;">
                    <img src="../../assets/mypic/dian.jpg" height="60px">
                    <van-overlay v-for="item in Details" :key="item.doctor_id" :show="show" @click="show = false"
                        style="overflow: scroll;">
                        <div style="background-color: #e0ecfe;padding: 0 15px 5px">
                            <div style="margin-top: 80px;display: flex;">
                                <img :src="item.doctor_avatar" style="border-radius: 50%;height:60px;">
                                <div style="margin: 15px 0;margin-left: 8px;">
                                    <div>
                                        <span style="font-size: 22px;font-weight: bolder;">{{ item.doctor_name }}</span><span>
                                            {{ item.doctor_titles }} | {{ item.department_name }} </span>
                                    </div>
                                    <div>
                                        <span>{{ item.hospital_name }}</span>
                                        <div
                                            style="background-color: #c27c1a;display: inline-block;color: white;padding: 1px;font-size: 13px;color: #50535a;">
                                            <i class="iconfont icon-yiyuan1" style="color: aliceblue;"></i>
                                            <span
                                                style="display:inline-block;font-weight: bolder;color: aliceblue;">三甲</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div
                                    style="padding: 10px 15px;background-color: aliceblue;border-radius: 8px;font-size: 13px;color: #50535a;">
                                    <div><span style="background-color: #2695fe;display: inline-block;color: white;">
                                            <span style="display:inline-block;padding: 0 3px;">擅长</span>
                                        </span><span style="line-height: 2;">{{ item.doctor_great }}</span></div>
                                    <p>
                                    <div style="background-color: #2695fe;display: inline-block;color: white;">
                                        <span style="display:inline-block;padding: 0 3px;">简介</span>
                                    </div><span style="line-height: 2;">{{item.doctor_short}}</span></p>
                                </div>
                            </div>
                            <div style="margin-top: 10px;">
                                <div
                                    style="padding: 10px 15px;background-color: aliceblue;box-sizing: content-box;border-radius: 8px;font-size: 12px;">
                                    <p style="font-weight:bolder;padding: 12px 0;font-size: 16px;">患者评价</p>
                                    <div v-for="item in rates" :key="item.rate_content">
                                        <div style="display: flex;justify-content: space-between;margin: 3px 0;">
                                            <p>用户****&nbsp;&nbsp;&nbsp;<van-icon name="star" color="#fcb00f" /><van-icon
                                                    name="star" color="#fcb00f" /><van-icon name="star"
                                                    color="#fcb00f" /><van-icon name="star" color="#fcb00f" /><van-icon
                                                    name="star" color="#fcb00f" /></p>
                                            <span>2022-11-18</span>
                                        </div>
                                        <p style="line-height: 1.5;">{{ item.rate_content }}</p>
                                        <hr style="margin-top: 12px;">
                                    </div>
                                </div>
                            </div>
                            <div style="margin:20px 0;">
                                <van-button type="primary" size="large"
                                    @click="router.push(`/consulting/${item.doctor_id}`)">图文咨询</van-button>
                            </div>
                        </div>
                    </van-overlay>
                </div>
                <div @click="look(item.doctor_id)" v-for="item in Doctors" :key="item.doctor_id"
                    style="display: flex;border-bottom: 1px solid gray;padding: 15px 0;">
                    <div @click="show = true">
                        <div style="display: flex;">
                            <img :src="item.doctor_avatar" style="border-radius: 50%;width: 50px;height: 50px;">
                            <div style="line-height: 1.5;font-size: 13px;">
                                <span style="font-weight: bold;font-size: 18px;">{{ item.doctor_name }}</span>
                                <span style="margin-left: 5px;">{{ item.doctor_titles }}&nbsp;|&nbsp;</span>
                                <span>{{ item.department_name }}</span>
                                <div style="display: flex;">
                                    <span style="font-size: 16px;">{{ item.hospital_name }}</span>
                                    <div style="background-color: darkorange;padding: 0 3px;margin-left: 5px;">
                                        <i id="tubiao" class="iconfont icon-yiyuan1" style="color: aliceblue;"></i>
                                        <span style="display:inline-block;color: aliceblue;">三甲</span>
                                    </div>
                                </div>
                                <p>擅长:{{ item.doctor_great }}</p>
                                <p>患者评分<span style="color: #0794f8;">4.8</span>&nbsp;&nbsp;质询量<span
                                        style="color: #0794f8;">1046</span>&nbsp;&nbsp;响应时间 <span
                                        style="color: #0794f8;">38分钟</span></p>
                                <p
                                    style="display: inline-block;padding: 1px 2px;background-color: burlywood;border-radius: 2px;color: #8f4f0d;">
                                    口碑医生</p>
                                <br>
                                <div
                                    style="margin: 15px 0;padding: 10px;display: inline-block;background-color: #f8f7ea;border-radius: 5px;font-weight: bolder;color: #828283;">
                                    图文质询<span style="color:#1087db">￥30</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <p style="color: darkturquoise;padding: 20px 0;text-align: center;">点击加载更多</p> -->
            </div>
        </div>
        <hr>
        <div style="text-align: center;margin-top: 30px;">
            <!-- <p>资质展示&nbsp;&nbsp;|&nbsp;&nbsp;意见反馈<span style="font-size: 20px;">></span></p> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import httpApi from '@/http'
import { ref, onMounted, reactive, watch } from 'vue';
import { useRouter } from 'vue-router';
import Doctor from '@/type/Doctor'
const value = ref('')
const show = ref(false);
const navActive = ref('1')
const onClickLeft = () => history.back()
const router = useRouter()
const Doctors = reactive<Doctor[]>([])
const Details = reactive<any[]>([])
const rates = reactive<any[]>([])
const Departments = reactive<any[]>([])
let xi = ref<any>([])
    const look =function(e:any){
    httpApi.DoctorApi.selectById({doctor_id:e}).then(res=>{
        console.log('加载的内容',res);
        Details.push(...res.data.data)
        console.log(Details);
    })
    httpApi.DoctorApi.selectRate({doctor_id:e}).then(res=>{
        rates.push(...res.data.data)
        console.log(rates);
    })
}
onMounted(() => {
    let params = { department_id: 1 }
    httpApi.DoctorApi.selectDoctorByType(params).then(res => {
        console.log('加载的内容', res);
        Doctors.push(...res.data.data)
        console.log('最后的结果', Doctors);
    })
    document.documentElement.scrollTop = 0
})
onMounted(()=>{
    let params = {page:1,pagesize:6}
    httpApi.DepartmentApi.select(params).then(res=>{
        // console.log(res);
        Departments.push(...res.data.data.result)
        console.log(Departments);
    })
})
// const onClikeTab = (name)=>{
//     console.log(name.name);
//     let id = name.name
//     let params ={department_id:id}
//     httpApi.DoctorApi.selectDoctorByType(params).then(res=>{
//         console.log('加载的内容',res);
//         Doctors=res.data.data
//         console.log('最后的结果', Doctors);
//     })
// }
watch(navActive, (newval, oldval) => {
    let params = { department_id: parseInt(newval) }
    httpApi.DoctorApi.selectDoctorByType(params).then(res => {
        console.log(res);
        Doctors.splice(0, Doctors.length, ...res.data.data)
        let value = JSON.stringify(res.data.data)
        localStorage.setItem(newval, value)
    })
})
const i = ref(Array<String[]>([]))
const value1 = ref(0);
const value2 = ref('a');
const activeId = ref(1);
const activeIndex = ref(0);
const option1 = [
    { text: '选择城市', value: 0 },
];
const option2 = [
    { text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
];
const option3 = [
    { text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
];
const items = [
    {
        text: '浙江',
        children: [
            { text: '杭州', id: 1 },
            { text: '温州', id: 2 },
            { text: '宁波', id: 3 },
        ],
    },
    {
        text: '江苏',
        children: [
            { text: '南京', id: 4 },
            { text: '无锡', id: 5 },
            { text: '徐州', id: 6 },
        ],
    },
    {
        text: '重庆',
        children: [
            { text: '渝北', id: 7 },
            { text: '万州', id: 8 },
            { text: '永川', id: 9 },
        ],
    },

];
</script>

<style scoped lang="scss">@import url("//at.alicdn.com/t/c/font_3903304_cmpuhvw7iap.css");

.van-search {
    width: 310px;
}
#tubiao{
    &:before{
        font-size: 16px;
    }
}
p {
    margin: 0px;
}</style>